<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  <style type="text/css">
    body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
  </style>
  <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=5CuIpxWLRR8QGtzpgmoln0c8"></script>

  <script type="text/javascript" src="../../plugins/zepto.js"></script>


  <script type="text/javascript" src="../../js/tool/common.js"></script>
  <script type="text/javascript" src="../../js/tool/gps.js"></script>

  <link rel="stylesheet" type="text/css" href="../../css/map/comm_map.css" />

  <link rel="stylesheet" type="text/css" href="../../plugins/layer/need/layer.css" />
  <script type="text/javascript" src="../../plugins/layer/layer.js"></script>


  <title>服务中心</title>
</head>
<body>
  <div id="r-result"><input type="text" id="suggestId" size="20" placeholder="请输入你要查找的地方" style="width: 90%;margin: 10px;height: 30px;position: absolute;z-index: 99;" /></div>
  <div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
  <div id="allmap"></div>
  <div id="loading" class="loading">
    <div id="loading" class="sk-fading-circle">
        <div class="sk-circle1 sk-circle"></div>
        <div class="sk-circle2 sk-circle"></div>
        <div class="sk-circle3 sk-circle"></div>
        <div class="sk-circle4 sk-circle"></div>
        <div class="sk-circle5 sk-circle"></div>
        <div class="sk-circle6 sk-circle"></div>
        <div class="sk-circle7 sk-circle"></div>
        <div class="sk-circle8 sk-circle"></div>
        <div class="sk-circle9 sk-circle"></div>
        <div class="sk-circle10 sk-circle"></div>
        <div class="sk-circle11 sk-circle"></div>
        <div class="sk-circle12 sk-circle"></div>
    </div>
  </div>
</body>
</html>
<script type="text/javascript">
var isAddCar = dataGet("isAddCar");//Y,N
  // 百度地图API功能
 getLocation();
  var map = new BMap.Map("allmap");
  var point;
  var point = new BMap.Point(120.16543,30.279311);
  var centerAndZoomLeave = 13;
  map.centerAndZoom(point, centerAndZoomLeave);

  var mySelf_point = new BMap.Icon("../../images/map/mySelf_point.png", new BMap.Size(17,17));
  var marker = new BMap.Marker(point, {icon:mySelf_point});  // 创建标注
  map.addOverlay(marker); 
  var myIcon = new BMap.Icon("../../images/map/express_map1.png", new BMap.Size(21,30));

  //urlfile 修改
  var data = "";
  var url = urlfile + "coreMap/find/all";
  ajaxTool("post",data,url,
      function error(XMLHttpRequest, textStatus, errorThrown,fnErr){
        if(dataGet("isLogined") == "true" && dataGet("userUuid")) {
          alert("error:" + errorThrown);
        }
      },
      function success(data){
        for(var i=0; i<data.data.length; i++) {
          var pt = new BMap.Point(data.data[i].crmapLongitude, data.data[i].crmapLatitude);
          var marker2 = new BMap.Marker(pt, {icon:myIcon});  // 创建标注
          marker2.addEventListener("click",attribute);
          map.addOverlay(marker2);              // 将标注添加到地图中
        }
      });

  function attribute(e){
    $('#loading').css("display","-webkit-box");
    var self =this;
      var p = e.target;
      var lng = p.getPosition().lng;
      var lat = p.getPosition().lat;
      var data = "&crmapLongitude="+lng+"&crmapLatitude="+lat;
      var url = urlfile + "coreMap/views/cnd";
      
      ajaxTool("post",data,url,
          function error(XMLHttpRequest, textStatus, errorThrown,fnErr){
            $('#loading').css("display","none");
            alert("error:" + errorThrown);
          },
          function success(data){
            $('#loading').css("display","none");
            if(data.success){
            //自定义覆盖物
            var sContent =
              "<h4 style='margin:0 0 5px 0;padding:0.2em 0'>"+ data.data.crmapName+"</h4>" + 
              "<p style='margin:0;line-height:1.5;font-size:13px;text-indent:2em'>"+ data.data.crmapDesc+"</p>" + 
              "</div>"+
              "<button type='button' style='margin-left: 5px;' onclick='searchLine("+lng+","+ lat +")'>我要到这里</button>";

            var infoWindow = new BMap.InfoWindow(sContent);  // 创建信息窗口对象          
            self.openInfoWindow(infoWindow);
          }else{
            alert(data.errMsg);
          }
      });
  }

  //查询路线
  function searchLine(lng, lat) {
    if(dataGet("latitude")||dataGet("longitude")){
      map.clearOverlays();
      var myP1 = new BMap.Point(dataGet("longitude"), dataGet("latitude"));    //起点
      var myP2 = new BMap.Point(lng, lat);    //终点
      var driving2 = new BMap.DrivingRoute(map, {renderOptions:{map: map, autoViewport: true}});    //驾车实例
      driving2.search(myP1, myP2);    //显示一条公交线路
    }else{
      alert("无法定位你的位置,请检查是否打开手机定位功能");
      return;
    }
  }

  function addAppoint() {

    var crmapBusi = $('#addAppoint').attr('data-id');
    $('#loading').css("display","-webkit-box");
    var craotUser = dataGet("userUuid");

    var data = "&craotUser="+craotUser + "&craotBusi="+crmapBusi;
    var url = urlfile + "coreAppoint/add/appoint"; 
    ajaxTool("post",data,url,
        function error(XMLHttpRequest, textStatus, errorThrown,fnErr){
          $('#loading').css("display","none");
          alert("error:" + errorThrown);
        },
        function success(data){
          map.closeInfoWindow();
          $('#loading').css("display","none");
          alert(data.errMsg);
    });
  }

  //定位控件
  var geolocationControl = new BMap.GeolocationControl();
  geolocationControl.addEventListener("locationSuccess", function(e){
    // 定位成功事件
    var address = '';
    address += e.addressComponent.province;
    address += e.addressComponent.city;
    address += e.addressComponent.district;
    address += e.addressComponent.street;
    address += e.addressComponent.streetNumber;
    alert("当前定位地址为：" + address);
  });
  geolocationControl.addEventListener("locationError",function(e){
    // 定位失败事件
    alert(e.message);
  });
  map.addControl(geolocationControl);

  //======================================================地图搜索功能
  // 百度地图API功能
  function G(id) {
    return document.getElementById(id);
  }

  var ac = new BMap.Autocomplete(    //建立一个自动完成的对象
    {"input" : "suggestId"
    ,"location" : map
  });

  ac.addEventListener("onhighlight", function(e) {  //鼠标放在下拉列表上的事件
  var str = "";
    var _value = e.fromitem.value;
    var value = "";
    if (e.fromitem.index > -1) {
      value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
    }    
    str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;
    
    value = "";
    if (e.toitem.index > -1) {
      _value = e.toitem.value;
      value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
    }    
    str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
    G("searchResultPanel").innerHTML = str;
  });

  var myValue;
  ac.addEventListener("onconfirm", function(e) {    //鼠标点击下拉列表后的事件
  var _value = e.item.value;
    myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
    G("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;
    
    setPlace();
  });

  function setPlace(){
    map.clearOverlays();    //清除地图上所有覆盖物
    function myFun(){
      var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
      map.centerAndZoom(pp, 18);

      var searchMarker = new BMap.Marker(pp);
      searchMarker.addEventListener("click",attribute);
      map.addOverlay(searchMarker);    //添加标注
    }
    var local = new BMap.LocalSearch(map, { //智能搜索
      onSearchComplete: myFun
    });
    local.search(myValue);
  }
  
</script>